<#include "../common/header.htm">
<div class="content-wrapper">
    <section class="content">
        <div class="row">
            <div class="newAdd-contentt">
                <div class="newAdd">
                    <div class="newAdd-trouble">问题</div>
                    <input type="text" class="newAdd-input" v-model="pm.question" name="question" >
                    <input type="hidden" id="qid" value="${qid!}">
                </div>
                <div class="newAdd-answer">
                    <div class="newAdd-trouble">回答</div>
                    <div id="container"></div>
                </div>
                <div class="newAdd-kWord">
                    <div class="newAdd-trouble">关键词</div>
                    <div id="batchKey">
                        <el-tag
                                :key="tag"
                                v-for="tag in dynamicTags"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(tag)">
                            {{tag}}
                        </el-tag>
                        <el-input
                                class="input-new-tag"
                                v-if="inputVisible"
                                v-model="inputValue"
                                ref="saveTagInput"
                                size="small"
                                @keyup.enter.native="handleInputConfirm"
                                @blur="handleInputConfirm"
                        >
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 关键词</el-button>
                    </div>

                    <div class="bulkInsert">
                        <input type="text" class="bulk-input" placeholder=请输入关键字 v-model="bulkInputVal" onKeyUp="ReplaceDot(this)">
                        <input type="button" value="批量添加" class="bulkInsert-iqre" @click="iqreAdd">
                        <input type="button" value="清空" class="bulkInsert-epty" @click="keyEmpty">
                    </div>
                    <div class="sureBack">
                        <input type="button" value="确定" class="bulkInsert-sure" @click="getContent">
                        <input type="button" value="返回" class="bulkInsert-back">
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
<script src="${ctx}/ueditor/ueditor.config.js"></script>
<script src="${ctx}/ueditor/ueditor.all.js"></script>
<script>
	//实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('container')就能拿到相关的实例
	var ue = UE.getEditor('container');
    function ReplaceDot(obj)
    {
        var oldValue=obj.value;
        while(oldValue.indexOf("，")!=-1)//寻找每一个中文逗号，并替换
        {
            obj.value=oldValue.replace("，",",");
            oldValue=obj.value;
        }
        obj.value = oldValue;
    }
    //判断字符是否为空的方法
    function isEmpty(obj){
        if(typeof obj == "undefined" || obj == null || obj == ""){
            return true;
        }else{
            return false;
        }
    }
    $(function(){
        $(".bulkInsert-back").click(function(){
            window.location.href="${ctx}/bill/stream/capacity";
        });
    })
    var qid = $("#qid").val();
    let batchKey = new Vue({
        el:".content",
        data() {
            return {
                dynamicTags : [],
                inputVisible : false,
                inputValue : '',
                bulkInputVal :'',
                pm:{
                	question : ""
                }
            };
        },
        methods : {
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            },
            iqreAdd(){
                var _this = this;
                var str = this.bulkInputVal;
                var arr = str.split(",");
                arr.forEach(function(n){
                    _this.dynamicTags.push(n);
                })
                this.inputVisible = false;
                this.bulkInputVal = '';
            },
            keyEmpty(){
                this.dynamicTags = [];
            },
            getContent(){
            	var question = $("input[name='question']").val();//问题
                var answer = UE.getEditor('container').getContent();//回答
                var tag = batchKey.dynamicTags;//关键字
                var data = { "qid" : qid, "question" : question, "answer" : answer, "sbparticiples" : tag.join(',') };
                $.ajax({
                	type : "post",
                    url : "${ctx}/mquestion/addAndEditQuestion",
                    contentType: "application/json;charset=UTF-8",
                    data : JSON.stringify(data),
                    success : function (date) {
                    	if(date.result = 'success'){
                    		toastr.success(date.data,"提示信息");
                    	}
                    },
                    error : function() {
                    	toastr.error("保存失败","提示信息");
                    }
                });
            }
        }
    });
    //编辑初始化内容
    window.onload = function()  { 
    	if(!isEmpty(qid)){
        	$.ajax({
            	type : "post",
                url : "${ctx}/mquestion/editQuestion",
                contentType : "application/json;charset=UTF-8",
                data : JSON.stringify({"qid" : qid}),
                success : function (data) {
                	batchKey.pm.question = data.mq.question;
                	UE.getEditor('container').setContent(data.mq.answer,true);
                	batchKey.dynamicTags = data.participles;
                }
            });
    	} 
    }; 
</script>
<style>
    .newAdd-contentt {
        width: 980px;
        margin: 0 auto;
    }
    .content {
        background-color: #eef3f7;
    }
    .row{
        background-color: white;
        padding: 15px 28px 15px 28px;
    }
    .newAdd{
        margin-bottom: 15px;
        line-height: 35px;
    }
    .newAdd-trouble{
        color: #6f7689;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 15px;
        float: left;
        margin-right: 25px;
    }
    .bulkInsert{
        margin-top: 20px;
        margin-left: 55px;
    }
    .bulkInsert .bulk-input{
        width: 50%;
        height: 35px;
        border-radius: 4px;
        border: 1px solid #ccc;
        padding: 6px;
        outline: none
    }
    input::-webkit-input-placeholder {
        color: #ccc;
    }
    .bulkInsert .newAdd-trouble{
        color: #6f7689;
        font-size: 14px;
        font-weight: 400;
    }
    .bulkInsert-iqre,.bulkInsert-epty,.bulkInsert-sure,.bulkInsert-back{
        width: 70px;
        margin-left: 15px;
        background-color: #4695ed;
        height: 32px;
        font-size: 14px;
        border: 1px solid transparent;
        color: white;
        border-radius: 4px;
    }
    .bulkInsert-epty {
        background-color: #e7e7e7;
        color: black;
        border-color: #adadad;
    }
    .newAdd-input{
        width: 800px;
        height: 35px;
        border-radius: 4px;
        border: 1px solid #e4e4e4;
        outline:none;
        padding: 0 8px 0 8px;
        display: block;
    }
    .el-tag + .el-tag {
        margin-left: 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
    div#batchKey {
        height: 200px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 10px;
        margin-left: 55px;
    }
    .el-tag .el-icon-close{
        color: white;
    }
    .el-tag{
        background-color: #4695ed;
    }
    .newAdd-answer {
        margin-bottom: 35px;
    }
    div#container {
        margin-left: 55px;
    }
    input.bulkInsert-sure,input.bulkInsert-back {
        width: 100px;
    }
    .sureBack {
        text-align: center;
        margin-top: 25px;
    }
    div#edui1_iframeholder {
        height: 200px!important;
    }
</style>